<template>
  <el-dialog :title="info.title" v-if="visible" :visible.sync="visible" center width="760px" :before-close="handleCancel">
    <el-form ref="formDate" label-suffix="" label-width="0" :rules="rules" :model="form">
      <el-row>
        <el-col :span="8">
          <div :class="'f-label' + (rules.report_time ? ' f-label-verify' : '')">月报时间:</div>
          <el-form-item label="" prop="report_time">
            <el-date-picker
              v-model="form.report_time"
              type="month"
              format="yyyy-MM"
              value-format="yyyy-MM-dd"
              size="small"
              clearable
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="22" class="mt20">
          <div :class="'f-label' + (rules.pre_matter ? ' f-label-verify' : '')">1. 上一月份主要完成事项:</div>
          <el-form-item label="" prop="pre_matter">
            <el-input type="textarea" :rows="4" v-model="form.pre_matter" size="small" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="22" class="mt20">
          <div :class="'f-label' + (rules.check_matter ? ' f-label-verify' : '')">2. 每月份定期检讨事项:</div>
          <el-form-item label="" prop="check_matter">
            <el-input type="textarea" :rows="4" v-model="form.check_matter" size="small" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="22" class="mt20">
          <div :class="'f-label' + (rules.have_matter ? ' f-label-verify' : '')">3. 本月份进行中的项目：:</div>
          <el-form-item label="" prop="have_matter">
            <el-input type="textarea" :rows="4" v-model="form.have_matter" size="small" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="22" class="mt20">
          <div :class="'f-label' + (rules.wait_matter ? ' f-label-verify' : '')">4. 待决定事项:</div>
          <el-form-item label="" prop="wait_matter">
            <el-input type="textarea" :rows="4" v-model="form.wait_matter" size="small" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="22" class="mt20">
          <div :class="'f-label' + (rules.next_matter ? ' f-label-verify' : '')">5. 本月份主要目标及行动计划:</div>
          <el-form-item label="" prop="next_matter">
            <el-input type="textarea" :rows="4" v-model="form.next_matter" size="small" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="22" class="mt20">
          <div :class="'f-label' + (rules.other_matter ? ' f-label-verify' : '')">6. 其他事项:</div>
          <el-form-item label="" prop="other_matter">
            <el-input type="textarea" :rows="4" v-model="form.other_matter" size="small" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="22" class="mt20">
          <div :class="'f-label' + (rules.proposed ? ' f-label-verify' : '')">7.建议:</div>
          <el-form-item label="" prop="proposed">
            <el-input type="textarea" :rows="4" v-model="form.proposed" size="small" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <div :class="'f-label' + (rules.files ? ' f-label-verify' : '')">附件上传:</div>
          <el-form-item label="" prop="files">
            <Upload v-model="form.files" :files="list" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="fr mt10">
            <el-button size="small" @click="handleCancel()">取 消</el-button>
            <el-button type="primary" size="small" @click="handleEdit()">保 存</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script>
import { files } from '@/api/file/cos'
import { addMonth, updMonth } from '@/api/report/report'
import Upload from '@/myComponents/Upload'
import form from '@/utils/form'

export default {
  components: { Upload },
  extends: form,
  props: {
    reqAdd: {
      default: addMonth,
      type: Function
    },
    reqUpd: {
      default: updMonth,
      type: Function
    }
  },
  data() {
    return {
      list: [],
      rules: {
        pre_matter: [{ required: true, trigger: 'blur', message: '上一月份主要完成事项不可为空' }],
        have_matter: [{ required: true, trigger: 'blur', message: '本月份进行中的项目不可为空' }],
        next_matter: [{ required: true, trigger: 'blur', message: '本月份主要目标及行动计划不可为空' }],
        check_matter: [{ required: true, trigger: 'blur', message: '每月份定期检讨事项不可为空' }],
        wait_matter: [{ required: true, trigger: 'blur', message: '待决定事项不可为空' }],
        other_matter: [{ required: true, trigger: 'blur', message: '其他事项不可为空' }],
        proposed: [{ required: true, trigger: 'blur', message: '建议不可为空' }],
        report_time: [{ required: true, trigger: 'blur', message: '月报时间不可为空' }]
      }
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.$set(this, 'list', [])
        this.form = this.info.edit
        this.$set(this.form, 'report_time', this.form.report_time+'-01')
        if(this.info.type === 'edit'){
          this.getFiles()
        }
      }
    }
  },
  mounted() {
  },
  methods: {
    getFiles() {
      files({e_id: this.form.id, db_type: 'logc_report_month_archives'}).then(response => {
        this.$set(this.form, 'files', JSON.stringify(response.list))
      }).catch(err => {
        this.$message.error(err.msg)
      })
    }
  }
}
</script>

<style>
.f-label{
  text-align: right;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-weight: 700;
}
.f-label-verify:before {
    content: "*";
    color: #ff4949;
    margin-right: 4px;
}
</style>
